<template>
	<view class="page">
		<view class="head-top">
			<view class="tabs">
				<view class="tab-item" @click="tabClick(1)" :class="{'active': isActive == 1}">智能查找</view>
				<view class="tab-item" @click="tabClick(2)" :class="{'active': isActive == 2}">精确匹配</view>
			</view>
			<view class="search-wrapper">
				<view class="input-wrapper" v-if="isActive == 1" >
					<input class="uni-input"
						confirm-type="search" 
                        @confirm="handleSearch"
						v-model="keywords"
						placeholder="输入银行名称，支持模糊搜索" />
				</view>
				<view class="tags-wrapper" v-if="isActive == 2">
					<EditTags @change="tagsChange" :params="cutStr"  />
				</view>
				<!-- <uni-icons class="clear-icon" type="clear" size="20" color="#999"></uni-icons> -->
				<uni-icons 
                    class="clear-icon" 
                    type="clear" 
                    v-if="(isActive == 1 && keywords.length > 0) || (isActive == 2 && cutStr.length > 0)" 
                    @click="clearInput" 
                    size="20" 
                    color="#9c9c9c"></uni-icons>
				<uni-icons class="search-icon" type="search" size="28" color="#999" @click="handleSearch"></uni-icons>
			</view>
		</view>
        <view class="h10"></view>
		<view class="result-content">
            <!-- <view class="tips">点击搜索框内的关键词，可对内容进行编辑</view> -->
			<view class="item-list">
				<view class="item" v-for="(item, index) in lists" :key="item.bid">
                    <view class="item-wrapper">
                        <view class="item-best" v-if="index == 0 && item.similarity > 85">
                            <image src="/static/best.png" mode="aspectFill" style="width: 44rpx;height:44rpx"></image>
                        </view>
                        <view class="item-top">
                            <view class="item-image">
                                <image :src="genImage(item.logo)" 
                                    mode="aspectFit" 
                                    style="width: 70rpx;height: 70rpx;"></image>
                            </view>
                            <view class="text-title">
                                {{item.bname}}
                            </view>
                        </view>
                        <view class="item-bottom">
                            <!-- <view class="text-block">
                                <view class="text-label">银行类型</view>
                                <view class="text-value">{{item.btype}}</view>
                            </view>
                            <view class="split-line"></view> -->
                            <view class="text-block">
                                <view class="text-label">联行号</view>
                                <view class="text-value">{{item.bid}}</view>
                            </view>
                            <view class="split-line"></view>
                            <view class="text-block">
                                <view class="text-label">匹配度</view>
                                <view class="text-value" :class="genColor(item.similarity)">
                                    {{item.similarity}}<span style="font-size: 20rpx;">%</span>
                                </view>
                            </view>
                            <view class="copy-btn">
                                <view @click="handleCopy(item)">
                                   <image style="width: 42rpx;height: 42rpx;"
                                       src="/static/copy.png" mode="aspectFit"></image>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="h3"></view>
				</view>
				<view class="empty" v-if="isBlank">
                    <view class="image-wrapper">
                        <image src="/static/rocket2.png" mode="aspectFill" style="width: 228rpx;height: 228rpx;"></image>
                    </view>
					<view class="tips-text">输入银行名称关键词，查询详细信息</view>
				</view>
				<view class="empty" v-if="isEmpty">
                    <view class="image-wrapper">
                        <image src="/static/noresult.png" mode="aspectFit" style="width: 338rpx;height: 178rpx;"></image>
                    </view>
					<view class="tips-text" v-if="isActive == 1">
                        未查询到结果，推荐使用<span class="link">精确查找</span>
                    </view>
					<view class="tips-text" v-else>
                        未查询到结果，尝试修改关键词
                    </view>
				</view>
			</view>
		</view>
        <!-- <ContactUs /> -->
	</view>
</template>

<script>
	// import XEClipboard from 'xe-clipboard'
	import { getInteData } from '@/api/index.js'
	import EditTags from '@/components/editTags/editTags.vue'
	import ContactUs from '@/components/contactUs/contactUs.vue'
	export default {
		data() {
			return {
                imgBaseUrl: this.$base_imgurl,
				isActive: 1,	//1：智能匹配  2：精确查找
				keywords: '',
				lists: [],
				cutStr: [],
				isBlank: true,  //初次页面加载为空时显示
				isEmpty: false  //查询结果为空时显示
			}
		},
		components: {
			EditTags,
            ContactUs
		},
		methods: {
			tabClick(index) {
				this.isActive = index
				//同时进行查询操作
				// if((index == 1 && this.keywords != '') || (index == 2 && this.cutStr.length > 0)) {
				// 	// this.handleSearch()
				// }
			},
			tagsChange(event) {
				this.cutStr = event
			},
			handleSearch() {
				uni.showLoading();
                this.isBlank = false;
                this.isEmpty = false;
                this.lists = []
				// 1、智能匹配
				if(this.isActive == 1) {
					if(this.keywords == '') {
                        this.rest()
						uni.showToast({
							icon: 'none',
							title: '关键词不能为空'
						});
						return
					}
					getInteData({ 'kw_1': this.keywords }).then(res => {
                        console.log('res============>', res)
                        uni.hideLoading()
                        
						if(res.code == 1) {
							uni.showToast({
                                icon: 'none',
                                title: res.message
                            })
                            this.rest()
                            return
						}
                        let RD = res.data
                        
                        //如果未查询到数据，提示跳转到精确查询
                        if(RD.rows.length == 0) {
                            uni.showToast({
                                icon: 'none',
                                title: '查询结果为空'
                            })
                        	this.isEmpty = true
                            return
                        }
                        
                        this.lists = RD.rows
                        //此处只显示三个关键词，如果超过三个关键词，对
                        let cs = RD.splitStr
                        
                        //过滤只有一个字的数组
                        cs = cs && cs.filter(el => {
                        	return el.length > 1
                        })
                        	
                        this.cutStr =  cs
                        // this.cutStr = cs.length > 3 ? cs.splice(0,2).concat(cs[cs.length-1]) : cs
                        
					})
				}
				// 2、精确查找
				else {
					if(this.cutStr.length == 0) {
                        this.rest()
						uni.showToast({
							icon: 'none',
							title: '关键词不能为空'
						});
						return
					}
                    
                    //构建请求参数
                    let params = {}
                    for (var index = 0; index < this.cutStr.length; index++) {
                        let element = this.cutStr[index];
                        params['kw_'+(index+1)] = element
                    }
					
					getInteData({...params}).then(res => {
						uni.hideLoading()
                        //错误处理
                        if(res.code == 1) {
                        	uni.showToast({
                                icon: 'none',
                                title: res.message
                            })
                            this.rest()
                            return
                        }
                        
                        let RD = res.data
                        
                        //如果未查询到数据，提示
                        if(RD.rows.length == 0) {
                            uni.showToast({
                                icon: 'none',
                                title: '查询结果为空'
                            })
                        	this.isEmpty = true
                            return
                        }
                        
						this.lists = RD.rows
					})
				}
			},
            clearInput() {
                if(this.isActive == 1) {
                    this.keywords = ''
                } else if (this.isActive == 2) {
                    this.cutStr = []
                }
            },
            rest() {
                this.isBlank = true;
                this.isEmpty = false;
                this.lists = [];
            },
            genImage(img) {
                return img ? this.imgBaseUrl + img : `${this.imgBaseUrl}other.png`
            },
            handleCopy(item) {
                uni.setClipboardData({
                    data: item.bname + '\n' + item.bid
                })
            },
            genColor(val) {
                return val >= 90 ? 'value-90': val >= 70 ? 'value-80':'value-70'
            }
		},
        watch: {
            keywords(newVal) {
                if(newVal == '') {
                    this.rest()
                } 
            }
        }
	}
</script>

<style lang="less">
	@import url('./search.less');
</style>

